<template>
  <el-calendar v-model="selectedDate" :first-day-of-week="7">
    <template #dateCell="{ date, data }">
      <div
        :class="[
          'date_cell',
          { 'not-current-month': data.type !== 'current-month' },
          { 'is-selected': data.isSelected },
          actTypeClass(date, '1'),
        ]">
        <div class="lunar-content">
          <div style="font-size: 20px">{{ date.getDate() }}</div>
          <div class="lunar">{{ showLunar(date, data) }}</div>
          <div class="selected">{{ data.isSelected ? '✔️' : '' }}</div>
        </div>
        <activity v-if="findAct(date) !== undefined" :act="findAct(date)" :class="actTypeClass(date, '2')"></activity>
      </div>
    </template>
  </el-calendar>
</template>

<script>
import * as apiSts from '@/api/_com_';
import * as actApi from '@/api/activity';
import '@/utils/datefmt';
import { lunar } from '@/utils/lunar';
import { MessageBox } from 'element-ui';
import { mapGetters } from 'vuex';
import Activity from './activity.vue';

export default {
  name: 'ActivityMonth',
  components: {
    ['activity']: Activity,
  },
  data() {
    return {
      selectedDate: new Date(),
      fetchedMonth: { now: undefined, loading: false }, // 当前获取到的活动列表所属月份
      activities: [], // 活动数据列表, 已按日期正序排序
    };
  },
  computed: {
    ...mapGetters(['name', 'id', 'deptId', 'openId']),
  },
  mounted() {},
  methods: {
    searchKeeper: async function (kname) {
      await this.fetchedMonthList(undefined, kname, true);
    },
    fetchedMonthList: async function (data, kname, search) {
      if (!this.openId) {
        // 不属于任何门店的用户(通常是系统管理员)
        return;
      }
      const m = search ? this.fetchedMonth.now : data.day.substring(0, 7);
      if (!search && (this.fetchedMonth.now === m || this.fetchedMonth.loading)) {
        return;
      }
      this.fetchedMonth.loading = true;
      let d;
      if (search) {
        // 只搜索当前月
        d = new Date(this.fetchedMonth.now + '-01');
      } else {
        d = new Date(data.day);
      }
      d.setHours(0, 0, 0, 0);
      d.setDate(1);
      const start = d.format('yyyy-MM-dd HH:mm:ss');
      d.setMonth(d.getMonth() + 1);
      d.setDate(0);
      const end = d.format('yyyy-MM-dd HH:mm:ss');
      this.activities.splice(0, this.activities.length);
      const errAlertMsg = '查询月活动信息失败';
      await actApi
        .getActivitySegment(this.openId, start, end, !!kname ? kname : null)
        .then(res => {
          this.fetchedMonth.now = m;
          if (res.data.status !== apiSts.ResponseOK) {
            MessageBox.alert(errAlertMsg);
            return;
          }
          const ret = res.data.data;
          if (ret && ret.actList && ret.actList.length > 0) {
            this.activities.push(...ret.actList);
          }
        })
        .catch(err => {
          console.log(err);
          MessageBox.alert(errAlertMsg);
        })
        .finally(() => {
          this.fetchedMonth.loading = false;
        });
    },
    /**
     * 公历转农历
     * @param {Date} date
     * @param {string} data
     * @return {string}
     */
    showLunar(date, data) {
      if (!date) {
        return '';
      }
      if (data.type === 'current-month') {
        this.fetchedMonthList(data);
      }
      const lunarObj = lunar.solar2lunar(date.getFullYear(), date.getMonth() + 1, date.getDate());
      return lunarObj.festival || lunarObj.lunarFestival || lunarObj.IDayCn;
    },
    findAct: function (date) {
      if (!date || this.activities.length == 0) {
        return undefined;
      }
      const item = this.activities.find(e => {
        if (!e.start) {
          return false;
        }
        const s = new Date(e.start);
        const yes =
          s.getFullYear() == date.getFullYear() && s.getMonth() == date.getMonth() && s.getDate() == date.getDate();
        return yes;
      });
      if (!item) {
        return undefined;
      }
      return item;
    },
    actTypeClass: function (date, val) {
      const item = this.findAct(date);
      if (!item) {
        return '';
      }
      if (item.scheme == 1) {
        return 'is_salon_' + val;
      }
      if (item.scheme == 2) {
        return 'is_gift_' + val;
      }
      if (item.scheme == 3) {
        return 'is_birthday_' + val;
      }
      return 'is_other_' + val;
    },
  },
};
</script>

<style lang="scss" scoped>
$act_color_overtime: #ff5b5b;
$act_bgcolor_overtime: #fff5f5;
$act_color_complete: #724eff;
$act_bgcolor_complete: #f5f5ff;
$act_color_not_participated: #f29339;
$act_bgcolor_not_participated: #fff5f5;
$act_color_birthday: #469b78;

::v-deep .el-calendar-table td:not(.is-selected) .not-current-month {
  color: #909399;
}

.date_cell {
  width: 100%;
  height: 100%;
}

.lunar-content {
  position: relative;
  padding: 5px 0px 0px 10px;
  display: flex;
  align-items: center;
  flex-direction: row;
  justify-content: flex-start;
  gap: 0px;

  .lunar {
    width: 50%;
    text-align: left;
    font-size: 14px;
    transform: scale(0.8);
  }

  .selected {
    position: absolute;
    top: 0px;
    right: 0px;
  }
}

.is-selected {
  color: #1989fa;
}

.is_birthday_1 {
  background-color: $act_bgcolor_complete;
}

.is_salon_1 {
  background-color: $act_bgcolor_complete;
}

.is_gift_1 {
  background-color: $act_bgcolor_not_participated;
}

.is_other_1 {
  background-color: $act_bgcolor_overtime;
}

.is_birthday_2 {
  color: $act_color_birthday;
}

.is_salon_2 {
  color: $act_color_complete;
}

.is_gift_2 {
  color: $act_color_not_participated;
}

.is_other_2 {
  color: $act_color_overtime;
}
</style>
